//----------------------------------------------
// Mast
//---------------------------------------------- 
.related {
  background-color: $color-lightgrey;

  &__title {
    @extend %text-center;
  }

  &__container {
    @include flex-grid(1, 2, 3, $pad: 1em);

    align-items: flex-end;
    justify-content: center;
    margin-top: 2em;
  }

  &__post {
    @media (max-width: $mq-small) {
      padding: {
        top: 2em;
        bottom: 2em;
      }
    }

    @media (min-width: $mq-med) {
      padding-bottom: 0;
    }

    &:last-child {
      padding-bottom: 0;

      @media (min-width: $mq-small) and (max-width: $mq-med) {
        display: none;
      }
    }
  }

  &__link {
    @extend .posts__link;

    &:hover {
      .related__img {
        transform: translate3d(0, -10px, 0);
      }
    }
  }

  &__img {
    @extend .posts__img;
  }

  &__text {
    @extend %font-header;
    @extend %font-size;
    @extend %text-center;
  }
}
